<template>
    <el-dialog  :title="title" :width="'26%'"  v-model="visible" append-to-body :lock-scroll="true" center custom-class="RegularPop group-dialog">  
        <el-form :inline="true" :model="form" ref="ruleFormRef" @submit.native.prevent>    
            <el-row>
                <el-col :span="12">
                    <el-form-item label="分组名称" >
                        <el-input v-model="form.title" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
            </el-row>  
        </el-form>    
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">返回</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </template>        
    </el-dialog>        
</template>
<script setup>
import { editResourceGroup,addResourceGroup } from "@/api/CMS/image";
const { proxy } = getCurrentInstance();
const dialogType = ref('')
const visible = ref(false);
const title = ref("");
const data = reactive({
  form: {},
});
const { form } = toRefs(data);
/** 重置操作表单 */
function reset() {
  proxy.$nextTick(() => {
    form.value = {};
  })
  form.value.id = ''
  proxy.resetForm("ruleFormRef");
}
// 显示弹框
function add() {
    dialogType.value = 'add'
//   isDisabled.value = false
  visible.value = true;
  title.value = "添加相册";
  reset();
}
// 修改弹框
function edit(row) {
    dialogType.value = 'edit'
  visible.value = true;
  title.value = "修改相册";
  reset();
  proxy.$nextTick(()=>{
    form.value = row
  })
}
/** 取消按钮 */
function cancel() {
  visible.value = false;
  reset();
};

/** 提交按钮 */
function submitForm() {
    if(dialogType.value == 'edit') {
        editResourceGroup(form.value).then(response => {
            if(response.code == 200) {
                proxy.$modal.msgSuccess("修改成功");
                visible.value = false;
                proxy.$emit('refresh')
            }
        });        
    }else {
        addResourceGroup(form.value).then(response => {
            if(response.code == 200) {
                proxy.$modal.msgSuccess("新增成功");
                visible.value = false;
                proxy.$emit('refresh')
            }
        });
    }    
};

defineExpose({
  add,
  edit
});
</script>
<style lang="scss">
.RegularPop.group-dialog {
    height: auto;
    .el-dialog__body {
        padding-top: 82px;
    }
    .el-dialog__footer {
        padding-bottom: 20px;
    }
}
</style>
